<template>
<div>
    <div id="graph-chart" class="graph-chart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts/core';
import {TitleComponent,ToolboxComponent,TooltipComponent,GridComponent,LegendComponent} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import options  from './options'
echarts.use([TitleComponent,ToolboxComponent,TooltipComponent,GridComponent,LegendComponent,LineChart,CanvasRenderer,UniversalTransition]);
/**
 * echarts  配置参考 https://echarts.apache.org/examples/zh/editor.html?c=line-stack
 * 按需引入降低打包体积，
 * 缺实际接口参数，数据处理由前端完成，带后端开发
 */
export default{
    props:{
        chart_data:{
            type:Object,
            default:()=>({series:[],x:[]})
        }
    },
    data(){
        return {
            chart:{},
            options:options
        }
    },
    mounted(){
        var chartDom = document.getElementById('graph-chart');
        this.chart  = echarts.init(chartDom);
        this.chart.setOption(this.options);
    },
    methods:{
        /**
         * 重新加载charts
         */
        resetChart(){
            this.chart.clear();
            this.options.series[0].data = this.chart_data.series;
            this.options.series[1].data = this.chart_data.maxList;
            this.options.xAxis.data = this.chart_data.x;
            this.chart.setOption(this.options);
            console.log('折线图重置成功')
        }
    }
}

</script>

<style scoped>
.graph-chart{
    height:320px;
}
</style>